<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/reviewmonitoring' }">评阅监控</el-breadcrumb-item>
			  <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				 <router-link :to="'/allmonitoringoverview?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">与全体一致性</router-link>
				 <router-link to="/">个人一致性</router-link>
				 <router-link to="/">抽查评阅</router-link>
				 <router-link :to="'/abnormaltestpaper?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">异常试卷</router-link>
				 <router-link :to="'/multievaluationmanagement?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">多评管理</router-link>
			</div>
			<div class="jkgailanContent">
				<div class="jkgailanContentLeft">
					<el-menu
					      class="el-menu-vertical-demo"
						  :unique-opened="true"
						  :default-openeds="defaultOpeneds"
						  @open="openparen">
					      <el-submenu :index="item.examCourseId.toString()" v-for="item in menulist" :key="item.examCourseId">
					        <template slot="title">
					          <span>{{item.examCourseName}}</span>
					        </template>
							<el-menu-item index="1-1" v-for="children in item.progresses" @click="elmenuidclick(children.questionId)" :key="index">{{children.questionNumber}}({{children.subjectprogress}}%)</el-menu-item>
					      </el-submenu>
					</el-menu>
				</div>
				<div class="jkgailanContentRight">
					<div class="echartsContent">
						<div class="chooseselect">
							<div>
								<el-select v-model="ycstatusInfo" placeholder="已处理/未处理" @change="ycclinfochange" clearable>
								    <el-option
								      v-for="item in ycstatus"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id">
								    </el-option>
								</el-select>
								<el-select v-model="yclistStatusInfo" placeholder="异常类型" @change="ycstatusinfochange" clearable>
								    <el-option
								      v-for="item in yclistStatus"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id">
								    </el-option>
								</el-select>
							</div>
							<div class="buttonem">
								<em>批量处理</em>
								<em>随机抽查</em>
							</div>
						</div>
						<div class="tableStyle">
							<el-table
								class="custom-table"
							    ref="multipleTable"
							    :data="yclist"
							    tooltip-effect="dark"
							    style="width: 100%"
							    @selection-change="handleSelectionChange"
								stripe
								:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
							    <el-table-column
							      type="selection"
							      width="55">
							    </el-table-column>
							    <el-table-column
							      label="试题密号">
							      <template slot-scope="scope">{{ scope.row.id }}</template>
							    </el-table-column>
							    <el-table-column
							      prop="questionName"
							      label="题组">
							    </el-table-column>
							    <el-table-column
							      label="标记类型">
								  <template slot-scope="scope">{{ scope.row.reviewExceptionStatus==0?'无异常':scope.row.reviewExceptionStatus==1?'学科错误':scope.row.reviewExceptionStatus==2?'题号错误':scope.row.reviewExceptionStatus==3?'图像不完整':scope.row.reviewExceptionStatus==4?'超出作答区':scope.row.reviewExceptionStatus==5?'字迹看不清':'其他异常' }}</template>
							    </el-table-column>
								<el-table-column
								  label="标记教师">
								  <template slot-scope="scope">
									  {{scope.row.teacherName}}
								  </template>
								</el-table-column>
								<el-table-column
								  label="标记时间">
								  <template slot-scope="scope">{{ scope.row.markingTime }}</template>
								</el-table-column>
								<el-table-column
								  label="处理状态">
								  <template slot-scope="scope">
									  <span :class="scope.row.status==2?'green':'red'" style="font-size:12px;">{{scope.row.paperExcetionStatus==2?'已处理':'未处理'}}</span>
								  </template>
								</el-table-column>
								<el-table-column
									fixed="right"
									label="操作"
									width="80"
									align="center">
									<template slot-scope="scope">
										<div>
											<el-button type="text" size="small"  @click="handleImage(scope.row.id,subjectid)"  style="display: flex;align-items: center;"><img src="../../assets/image/school/pj.png" style="width:12px;margin-right:5px;" />处理</el-button>
										</div>
									</template>
								</el-table-column>
							  </el-table>
						</div>
						<div class="examFootercontent">
							<el-pagination
								background
							      @current-change="handleCurrentChange"
								  :page-sizes="[20, 50, 100]"
								  @size-change="handleSizeChange"
								  :page-size="ycstatusobj.pageSize"
								  layout="sizes, prev, pager, next"
							      :total="total">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
			</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import {get,post,del,dele,put} from '../../request/api.js'
	export default{
		data(){
			return{
				yclist:[
					{
						my:'1111111',
						questionnumber:'14题',
						name:'找老师',
						mark:'图像不完整',
						time:'2024-11-19 14:25:00',
						status:0,
						id:1111
					},
					{
						my:'1111111',
						questionnumber:'14题',
						name:'找老师',
						mark:'图像不完整',
						time:'2024-11-19 14:25:00',
						status:1,
						id:1111
					}
				],
				menulist:[],
				defaultOpeneds: [], // 默认展开的菜单项 ID
				questionGroup:'',
				chulierror:'',
				errorinfo:'',
				options:[{label:'1dd',value:1},{label:'1dd',value:2}],
				currentPage3:2,
				ycstatus:[
					{
						id:1,
						name:'未处理'
					},
					{
						id:2,
						name:'已处理'
					}
				],
				yclistStatus:[
					{
						id:1,
						name:'学科异常'
					},
					{
						id:2,
						name:'题号错误'
					},
					{
						id:3,
						name:'图像不完整'
					},
					{
						id:4,
						name:'超出作答区'
					},
					{
						id:5,
						name:'字迹看不清'
					},
					{
						id:6,
						name:'其他异常'
					}
				],
				ycstatusInfo:'',
				yclistStatusInfo:'',
				total:100,
				ycstatusobj:{
					page:1,
					pageSize:20,
					query:{
						examCourseId:'',
						reviewExceptionStatus:'',
						paperExcetionStatus:'',
						questionId:0
					}
				},
				subjectlistprogess:[],
				examobjcontent:{},
				questionIds:''
			}
		},
		mounted() {
			// 默认展开第一个菜单项
			if (this.menulist.length > 0) {
			  this.defaultOpeneds.push(this.menulist[0].examCourseId.toString())
			}
			this.subjectlist()
		},
		methods:{
			// 获取全科进度
			subjectlist(){
				let obj = {
					examId:this.$route.query.examid
				}
				get('/reviewmonitor/progress',obj)
				.then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.subjectid = res.data[0].examCourseId
						this.ycclicklist(res.data[0].examCourseId)
						// this.progresslistclick()
						res.data.map(item=>{
							item.progresses.map(chil=>{
								chil.subjectprogress = chil.reviewedCount==0||chil.totalReviewCount==0?0:((chil.reviewedCount/chil.totalReviewCount)*100).toFixed(2)
							})
						})
						this.menulist = res.data
						// //console.info(res.data)
					}else{
						this.$message.error(res.message)
					}
				})
			},
			getRowStyle({ rowIndex }) {
			    return {
			      backgroundColor: rowIndex % 2 === 1 ? '#FAFAFB' : '#ffffff'
			    };
			},
			ycclicklist(id){
				this.ycstatusobj.query.examCourseId = id
				this.ycstatusobj.query.reviewExceptionStatus = this.yclistStatusInfo==''?0:this.yclistStatusInfo
				this.ycstatusobj.query.paperExcetionStatus = this.ycstatusInfo==''?0:this.ycstatusInfo
				this.ycstatusobj.query.questionId = this.questionIds==''?0:this.questionIds
				post('/paperexception/pagelist',this.ycstatusobj)
				.then(res=>{
					if(res.code==200){
						this.yclist = res.data.items
						this.total = res.data.total
					}else{
						this.$message.error(res.message);
					}
				})
			},
			// 处理每页条数变化
			handleSizeChange(val){
				this.ycstatusobj.pageSize = val
				this.ycclicklist(this.subjectid)
			},
			handleCurrentChange(val){
				this.ycstatusobj.page = val
				this.ycclicklist(this.subjectid)
			},
			questionidclick(id){
				this.questionIds=id
				this.ycclicklist(this.subjectid)
			},
			ycclinfochange(val){
				this.ycclicklist(this.subjectid)
			},
			ycstatusinfochange(val){
				this.ycclicklist(this.subjectid)
			},
			// 全选
			handleSelectionChange(val) {
			  	this.multipleSelection = val;
			},
			handleImage(id,exid){
				this.$router.push('/abnormalanswersheethandling?questionid='+id+'&examcourseid='+exid)
			},
			openparen(key) {
				this.defaultOpeneds.push(key.toString())
				this.subjectid = key
				this.questionIds = 0
				this.ycclicklist(key)
			},
			elmenuidclick(id){
				this.questionIds = id
				this.ycclicklist(this.subjectid)
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #Fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.chooseselect{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px 0 0 14px;
	}
	.chooseselect >>>  .el-select{
		margin-right:8px;
	}
	.chooseselect >>> .el-input__inner{
		width:155px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.chooseselect >>> .el-input__icon{
		line-height:34px;
	}
	.chooseselect div em{
		display: inline-block;
		width: 104px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size:14px;
		color:#fff;
		text-align: center;
		line-height:34px;
		margin-right:14px;
		cursor: pointer;
	}
	.chooseselect div em:last-child{
		width: 124px;
		height: 34px;
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		font-size:14px;
		text-align: center;
		line-height:34px;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td span.green{
		display: inline-block;
		color:#288F41;
		width: 48px;
		height: 22px;
		background: rgba(40,143,65,0.06);
		border-radius: 6px;
		border: 1px solid rgba(40,143,65,0.5);
		text-align: center;
		font-size:14px;
	}
	.tableStyle table tr td span.red{
		display: inline-block;
		color:#EC555A;
		width: 48px;
		height: 22px;
		background: rgba(236,85,90,0.06);
		border-radius: 6px;
		border: 1px solid rgba(236,85,90,0.5);
		text-align: center;
		font-size:14px;
	}
	.tableStyle table tr td b{
		color:#295CFF;
		cursor: pointer;
		font-size:14px;
		margin:0 6px;
	}
	.tableStyle table tr td b img{
		display: inline-block;
		margin-right:3px;
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td >>>  .el-input__inner{
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td >>>  .el-input__icon{
		line-height:30px;
	}
	.jkgailanContent{
		display: flex;
		justify-content: space-between;
		margin-top:14px;
	}
	.jkgailanContentLeft{
		width: 180px;
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentLeft::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.el-submenu__title{
		height: 42px;
		background: #FAFAFB;
		border-radius: 10px 10px 0px 0px;
		line-height:42px;
	}
	.el-menu{
		border:none;
		background:none;
		font-size:14px;
		color:#2A303B;
		border-radius:10px;
	}
	.el-submenu .el-menu-item{
		padding:0 24px !important;
		color:#8E96A4;
		min-width:auto;
	}
	.el-menu-item:focus, .el-menu-item:hover{
		background:none;
		color:#295CFF;
	}
	
	.el-menu li:nth-child(2n){
		background: #FAFAFB;
	}
	.jkgailanContentRight{
		width: calc(100% - 195px);
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentRight::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.echartsContent{
		position:relative;
	}
	.echartInfo{
		width:85%;
		position:absolute;
		left:60px;
		top:-50px;
		display: flex;
		justify-content: space-between;
		font-size:14px;
		color:#2A303B;
		line-height:1.6
	}
	.echartInfo p{
		color:#5B6371;
		line-height:2.4
	}
	.echartInfo p b{
		color:#5B6371;
	}
	.echartInfo p b i{
		color:#295CFF;
		font-style:normal
	}
	.boxinfoset{
		text-align: right;
	}
	.boxinfoset ul{
		display: flex;
		align-items: center;
	}
	.boxinfoset ul li{
		margin-left:30px;
		position:relative;
		padding-left:20px;
	}
	.boxinfoset ul li:nth-child(1):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #295CFF;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(2):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #EC555A;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(3):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #288F41;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset em{
		display: inline-block;
		width: 104px;
		height: 34px;
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		font-size:14px;
		color:#295CFF;
		text-align: center;
		line-height:34px;
		margin-bottom:8px;
	}
	.examFootercontent{
		padding:0 14px 30px;
		text-align: right;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		margin-top:2px;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>